<template>
    <div class="wh-100%">
        <n-card v-if="order">
            <template #header> 支付订单 </template>
            <div class="wh-100% flex items-center gap-10px">
                <div class="w-40% flex flex-col items-center">
                    <div class="font-size-24px">
                        <n-countdown
                            :duration="countdown"
                            :precision="1"
                        ></n-countdown>
                    </div>
                    <n-divider>订单详情</n-divider>
                    <n-list class="w-full" hoverable>
                        <n-list-item>
                            <n-thing title="订单号" :title-extra="order.id" />
                        </n-list-item>
                        <n-list-item>
                            <n-thing
                                title="订单金额"
                                :title-extra="`${order.amount}￥`"
                            />
                        </n-list-item>
                        <n-list-item>
                            <n-thing
                                title="创建时间"
                                :title-extra="`${new Date(
                                    order.createdTime
                                ).toLocaleString()}`"
                            />
                        </n-list-item>
                        <n-list-item>
                            <n-thing title="预约时间">
                                <template #header-extra>
                                    {{
                                        `${new Date(
                                            order.requirement.reserveDate!
                                        ).toLocaleDateString()} ${
                                            order.requirement.startTime
                                        }:00-${order.requirement.endTime}:00`
                                    }}
                                </template>
                            </n-thing>
                        </n-list-item>
                    </n-list>
                </div>
                <div class="w-60%">
                    <div class="flex justify-center">
                        <n-image width="240" :src="QRCode"></n-image>
                        <n-image width="240" :src="QRCode2"></n-image>
                    </div>
                    <div class="w-full flex-center gap-10px">
                        <n-input
                            v-model:value="payCode"
                            placeholder="输入支付码"
                            type="password"
                            style="width: 350px"
                        ></n-input>
                        <n-button
                            ghost
                            type="primary"
                            class="w-100px"
                            @click="handlePay"
                        >
                            支付
                        </n-button>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="w-full flex justify-end">
                    <n-button type="warning" @click="handleCancelOrder">
                        取消订单
                    </n-button>
                </div>
            </template>
        </n-card>
    </div>
</template>

<script lang="ts" setup>
import { ref, onActivated } from "vue";
import { getStore } from "@/store";
import { useRouter } from "vue-router";
import type { Order } from "@/service/api/types/reservation";

import QRCode from "@/assets/qrcode.png";
import QRCode2 from "@/assets/qrcode2.png";

import { payOrder, cancelOrder } from "@/service/api/modules/order";

defineOptions({
    name: "payment",
});

const router = useRouter();
const reservationStore = getStore("reservation");

// 订单信息
const order = ref<Order | null>(null);
// 订单有效期倒计时
const countdown = ref(0);
// 支付码
const payCode = ref("");

onActivated(() => {
    payCode.value = "";
    order.value = reservationStore.getUnpaidOrder;
    countdown.value = order.value!.createdTime + 30 * 60 * 1000 - Date.now();
});

const handleCancelOrder = () => {
    window.NDialog.warning({
        title: "取消订单",
        content: "确认取消订单吗？",
        closable: false,
        positiveText: "确认",
        negativeText: "取消",
        onPositiveClick: async () => {
            try {
                await cancelOrder(order.value!.id!);
                reservationStore.setUnpaidOrder(null);
                window.NMessage.success("取消订单成功");
                router.push("/layout");
            } catch (err) {
                window.NMessage.error((err as Error).message);
            }
        },
    });
};

const handlePay = async () => {
    if (payCode.value.length === 0) {
        window.NMessage.warning("请输入支付码");
        return;
    }
    if (payCode.value !== "123456") {
        window.NMessage.error("支付码错误");
        return;
    }
    try {
        await payOrder(order.value!.id!);
        reservationStore.setUnpaidOrder(null);
        window.NMessage.success("已提交预约单，请等待审核");
        router.push("/layout");
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
};
</script>

<style scoped></style>
